<script setup lang="ts">
const props = defineProps({load:Boolean})
</script>

<template>
  <van-loading v-if="load" type="spinner" color="#1989fa"></van-loading>
</template>

<style lang="scss" scoped>
.van-loading,
.van-loading--spinner {
  width: 30px;
  height: 30px;
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .van-loading__text {
    display: inline-block;
    margin-left: 8px;
  }
  .van-loading__spinner {
    position: relative;
    display: inline-block;
    width: 30px;
    max-width: 100%;
    height: 30px;
    max-height: 100%;
    vertical-align: middle;
    animation: rote 0.8s linear infinite;
  }
  .van-loading__spinner--spinner {
    animation-timing-function: steps(12);
    i {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      &::before {
        display: block;
        width: 2px;
        height: 25%;
        margin: 0 auto;
        background-color: currentColor;
        border-radius: 40%;
        content: " ";
      }
      &:nth-of-type(1) {
        transform: rotate(30deg);
        opacity: 1;
      }
      &:nth-of-type(2) {
        transform: rotate(60deg);
        opacity: 0.9375;
      }
      &:nth-of-type(3) {
        transform: rotate(90deg);
        opacity: 0.875;
      }
      &:nth-of-type(4) {
        transform: rotate(120deg);
        opacity: 0.815;
      }
      &:nth-of-type(5) {
        transform: rotate(150deg);
        opacity: 0.75;
      }
      &:nth-of-type(6) {
        transform: rotate(180deg);
        opacity: 0.6875;
      }
      &:nth-of-type(7) {
        transform: rotate(210deg);
        opacity: 0.625;
      }
      &:nth-of-type(8) {
        transform: rotate(240deg);
        opacity: 0.5625;
      }
      &:nth-of-type(9) {
        transform: rotate(270deg);
        opacity: 0.5;
      }
      &:nth-of-type(10) {
        transform: rotate(300deg);
        opacity: 0.4375;
      }
      &:nth-of-type(11) {
        transform: rotate(330deg);
        opacity: 0.375;
      }
      &:nth-of-type(12) {
        transform: rotate(360deg);
        opacity: 0.3125;
      }
    }
  }
}
@keyframes rote {
  from {
    transform: rotate((0deg));
  }
  to {
    transform: rotate(360deg);
  }
}
</style>